><template>
    <div class="dh_xgj_clientdetails">

        <div  class="d_x_cdet-box">
            <i class="d_x_cb-icon" @click="back" title="返回上一步操作"></i>
            <span class="d_x_cb-text">共 <span>{{clientdetails.length}}</span> 条沟通记录</span>
        </div>

        <div class="d_x_cdet" v-for="(item,key) in clientdetails" :key="key">
            <div class="d_x_cdet-title mb20">
                <span> {{item.time*1000 | formatDate}} {{item.time*1000 | formatDateBehind}}</span>
            </div>
            <div class="d_x_cdet-text">
                <span class="d_x_c-t-record">{{key+1}}.沟通记录: </span><span>{{item.content}}</span>
            </div>
        </div>

    </div>
</template>

<script>

import {formatDate} from '../js/time.js';		 //直接在标签中转化时间的方法
export default {
    components: {},
    data() {
        return {
            routerid: '',                       //路由传过来的值
            clientdetails:[],                   //客户详细情况数组
            login: {},                          //缓存中的用户名跟密码
        };
    },
    filters: {
        formatDate(time) {							 //日期(年月日)
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
        },
        formatDateBehind(time) {					 //时间(时分秒)
            var date = new Date(time);
            return formatDate(date, 'hh:mm:ss');     //时间点 例 21点12分12秒的格式
        },
    },
    computed: {},
    watch: {},
    methods: {
        // 返回键
        back(){
            let that = this
            this.$router.go(-1);//返回上一层
        },
        // 接口请求的方法
        requestdata(){
            const that = this;
            let axios = require('axios');
            let data = {
                name:that.login.uname,
                password:that.login.pwd,
                customer_id: that.routerid
            }
            let updata = JSON.stringify(data)
            // console.log(data,updata)
            axios({
                method: 'post',
                url: '/api/api/dh_school/b_custde.php',
                headers: { "Content-Type": "appliction/JSON" },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                that.clientdetails = resp.data.data
            })
            .catch( err=> { 
                // console.log(err)
            })
        },
    },
    created() {},
    mounted() {
        const that = this;
        that.routerid = this.$route.params.clientid
        that.login = JSON.parse(sessionStorage.getItem("dh_xgj_login"))
        that.requestdata()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
/* //@import url(); 引入公共css类 */
/* 返回按钮 */
    .d_x_cdet-box{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: 40px;
        margin-bottom: 10px;
    }
    .d_x_cb-icon{
        display: inline-block;
        width: 20px;
		height: 20px;
		/* margin: 10px 0 30px 0; */
        vertical-align: middle;
		background: url(../assets/return.png);
    }
    .d_x_cb-text{
        align-self:flex-end;
    }
    .d_x_cb-text>span{
        font-size: 20px;
        font-style:oblique;
        color: rgb(255, 0, 0);
    }
    /* 聊天内容 */
    .d_x_cdet{
        /* width: 80%; */
        margin: 0 auto 30px;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgb(71, 71, 71);
    }
    .d_x_cdet-title,.d_x_cdet-text{
        text-align: left;
    }
    .d_x_cdet-text>span:nth-child(2){
        line-height: 30px;
    }
    .d_x_c-t-record{
        font-size: 18px;
        color: #409eff;
    }
</style>